<template>
  <div class="container">
    <el-card>
      <div class="btn-warp">
        <span class="sp-text">说明：目前支持学科和关键字条件筛选</span>
        <el-button 
        size="small" 
        type="success" 
        icon="el-icon-edit"
        @click="$router.push('new')"
          >新增试题</el-button
        >
      </div>
      <!-- :gutter="10" -->
      <!-- 下拉表单 -->
      <el-form id="searchForm" label-width="80px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="学科">
              <el-select
                v-model="quesParams.subjectID"
                placeholder="请选择"
                @change="getDirectoryList"
              >
                <el-option
                  v-for="item in subjectList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级目录">
              <el-select v-model="quesParams.catalogID" placeholder="请选择">
                <el-option
                  v-for="item in directorysList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签">
              <el-select v-model="quesParams.tags" placeholder="请选择">
                <el-option
                  v-for="item in tagsList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字">
              <el-input v-model="quesParams.keyword" placeholder="根据题干搜索">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="试题类型" prop="questionType">
              <el-select v-model="quesParams.questionType" placeholder="请选择">
                <el-option
                  v-for="item in questionType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="难度">
              <el-select v-model="quesParams.difficulty" placeholder="请选择">
                <el-option
                  v-for="item in difficulty"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="方向">
              <el-select v-model="quesParams.direction" placeholder="请选择">
                <el-option
                  v-for="item in direction"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="录入人">
              <el-select v-model="quesParams.creatorID" placeholder="请选择">
                <el-option
                  v-for="item in roleList"
                  :key="item.id"
                  :label="item.username"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="题目备注">
              <el-input v-model="quesParams.remarks"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称">
              <el-input v-model="quesParams.shortName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="城市">
              <div class="citySelect">
                <el-select
                  v-model="quesParams.province"
                  placeholder="请选择"
                  style="margin-right: 5px"
                  @change="getAreaData"
                >
                  <el-option
                    v-for="item in provincesList"
                    :key="item"
                    :label="item"
                    :value="item"
                  >
                  </el-option>
                </el-select>
                <el-select v-model="quesParams.city" placeholder="请选择">
                  <el-option
                    v-for="item in citysList"
                    :key="item"
                    :label="item"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item class="searchBtn">
              <el-button size="mini" @click="clearAll()">清除</el-button>
              <el-button size="mini" type="primary" @click="SearchQues()"
                >搜索</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- tab栏选项卡 -->
      <el-tabs v-model="quesParams.chkState" type="card" @tab-click="tabClick">
        <el-tab-pane label="全部" name="all"> </el-tab-pane>
        <el-tab-pane label="待审核" name="0"> </el-tab-pane>
        <el-tab-pane label="已审核" name="1"> </el-tab-pane>
        <el-tab-pane label="已拒绝" name="2"> </el-tab-pane>
      </el-tabs>
      <!-- 提示信息条 -->
      <el-alert
        :title="`数据一共${totalCounts}条`"
        :closable="false"
        class="totalAlert"
        type="info"
        show-icon
      />
      <!-- 试题展示 -->
      <questions-check
        :questionsData="questionsData"
        @get-checkdata="getQuestions"
        @get-publishdata="getQuestions"
        @clear="getQuestions"
      />
      <!-- 分页器 -->
      <el-pagination
        background
        @size-change="changeSize"
        @current-change="changePage"
        :current-page="quesParams.page"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="quesParams.pagesize"
        layout="prev, pager, next, sizes, jumper"
        :total="totalCounts"
        style="margin-top: 20px; text-align: right"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { simple as getSimSubject } from "@/api/hmmm/subjects.js";
import { simple } from "@/api/hmmm/directorys.js";
import { simple as simpleTag } from "@/api/hmmm/tags.js";
import { questionType, difficulty, direction } from "@/api/hmmm/constants.js";
import { simple as userSimple } from "@/api/base/users.js";
import QuestionsCheck from "../components/questions-check";
import { choice as getQuestionsList } from "@/api/hmmm/questions.js";
import { provinces, citys } from "@/api/hmmm/citys.js";

export default {
  name: "QuestionsChoice",
  components: {
    QuestionsCheck,
  },
  data() {
    return {
      //获取精选题库请求参数
      quesParams: {
        page: 1,
        pagesize: 5,
        chkState: "all",
        subjectID: null, //已选中的学科id
        catalogID: null, //已选中的目录id
        tags: null, //已选中的标签id
        keyword: null, //搜索关键字
        questionType: null, //已选中的试题类型的id
        difficulty: null, //已选中的试题难度的id
        direction: null, //已选中的方向的id
        creatorID: null, //已选中的录入角色的id
        shortName: null, //企业简称
        remarks: null, //题目备注
        province: null, //已选中的城市的id
        city: null, //已选中的地区的id
      },

      questionsData: [], //不同试题审核状态下的数据
      subjectList: [], //初始化学科列表
      directorysList: [], //目录列表
      tagsList: [], //标签列表
      questionType: questionType, // 题型
      difficulty: difficulty, // 难度
      direction: direction, //方向
      roleList: [], //用户角色列表
      activeIndex: "1", //tab激活项
      totalCounts: 0, //总记录条数
      provincesList: provinces(), //初始化城市数据
      citysList: [], //初始化地区数据
    };
  },
  
  async mounted() {
    // 获取学科列表数据
    const { data: res } = await getSimSubject();
    // console.log(res);
    this.subjectList = res;
    // console.log(this.subjectList);

    // 获取角色列表
    const { data: roleRes } = await userSimple();
    console.log(roleRes);
    this.roleList = roleRes;
    this.getQuestions();
    // this.questionType = questionType;
    // this.difficulty = difficulty;
    // this.direction = direction;
    // this.provincesList = provinces();
  },
  methods: {
    // 获取试题表单数据
    async getQuestions() {
      const params = { ...this.quesParams };
      if (params.chkState === "all") params.chkState = null;
      const { data: data } = await getQuestionsList(params);
      // console.log(data);
      this.questionsData = data.items;
      // console.log(this.questionsData);
      this.totalCounts = data.counts;
    },
    async getDirectoryList(subjectID) {
      // console.log(subjectID);
      this.quesParams.catalogID = null;
      this.quesParams.tags = null;
      if (subjectID) {
        const { data: res } = await simple({subjectID});
        console.log(res);
        this.directorysList = res;
        const { data: tagRes } = await simpleTag({subjectID});
        // console.log(tagRes);
        this.tagsList = tagRes;
      } else {
        this.directorysList = [];
        this.tagsList = [];
      }
    },
    // tab 栏点击事件
    tabClick() {
      this.quesParams.page = 1;
      this.getQuestions();
    },
    // 页面数据条数
    changeSize(newSize) {
      this.quesParams.pagesize = newSize;
      this.getData();
    },
    //  当前页数
    changePage(newPage) {
      this.quesParams.page = newPage;
      this.getData();
    },
    //  监听选择城市变化，获取对应城市下的地区
    getAreaData() {
      // console.log("............");
      this.quesParams.city = null;
      this.citysList = citys(this.quesParams.province);
      // console.log(this.citys);
      // console.log("..............");
    },
    // 重置表单
    clearAll() {
      document.getElementById("searchForm").reset();
    },
    // 点击搜索试题数据
    SearchQues() {
      this.quesParams.page = 1;
      this.getQuestions();
    },
  },
};
</script>

<style rel="stylesheet/scss" scoped lang='scss'>
.container {
  padding: 10px;
  .btn-warp {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
    .sp-text {
      font-size: 12px;
      color: pink;
    }
  }
  el-select {
    width: 100%;
    //  ::v-deep .el-input{
    //    .el-input__inner{
    //      height: 32px;
    //    }
    // }
  }
  .citySelect {
    display: flex;
    justify-content: space-between;
  }
  .searchBtn {
    float: right;
    
  }
  .totalAlert {
    margin-bottom: 10px;
  }
}
</style>
